// 基本信息
import DialogBox from "@/components/DialogBox";
import SelectDeptList from "@/components/Sansan/SelectDeptList";
import SelectProductList from "@/components/Sansan/SelectProductList";
import { ElForm } from "element-plus";
import { getCurrentInstance, defineComponent, PropType, ComponentInternalInstance } from "vue";
// import LazyUploadFile from "@/components/Upload/LazyUploadFile.vue";
import { generateSn, showTips } from "@/utils/util";
import { addGateway, modifyGateway } from "@/api/modules/iot/gateway";
import { GatewayType } from "@/api/interface/iot";
interface DeviceForm {
	[key: string]: any;
}
export default defineComponent({
	props: {
		width: String,
		title: String,
		readonly: Boolean,
		detail: {
			type: Object as PropType<DeviceForm>,
			default() {
				return {};
			}
		}
	},
	emits: ["submit"],
	setup(props, { attrs, emit }) {
		const { proxy } = getCurrentInstance() as ComponentInternalInstance;
		type FormInstance = InstanceType<typeof ElForm>;
		const formRef = ref<FormInstance>();
		// const uploadEl = ref();
		const formRule = reactive({
			sn: [{ required: true, message: proxy?.$t("gateway_basicdiglog.form_rule_msg.sn"), trigger: "change" }]
			// productModel: [{ required: true, message: proxy?.$t("gateway_basicdiglog.form_rule_msg.productModel"), trigger: "change" }]
		});
		const validData = () => {
			formRef.value?.validate(async valid => {
				if (valid) {
					props.detail.name = props.detail.name || props.detail.sn;
					let api = props.detail.id ? modifyGateway : addGateway;
					props.detail.type = props.detail.id && props.detail.defaultType ? props.detail.defaultType : props.detail.type;
					let res: any = await api({ ...props.detail }, props.detail.type || GatewayType.SoftGateway);
					let ok = showTips(
						res.code,
						props.detail.id ? proxy?.$t("gateway_basicdiglog.tips.edit") : proxy?.$t("gateway_basicdiglog.tips.add"),
						res.message
					);
					if (ok) {
						// uploadEl.value.submit({ instanceId: res.result?.sn });
						emit("submit", ok);
					}
				}
			});
		};
		onMounted(() => {});
		return () => {
			return (
				<DialogBox
					{...attrs}
					width={props.width}
					title={props.title}
					footerLabel={
						props.readonly
							? [proxy?.$t("gateway_basicdiglog.footerlabel.close")]
							: [proxy?.$t("gateway_basicdiglog.footerlabel.cancel"), proxy?.$t("gateway_basicdiglog.footerlabel.confirm")]
					}
					onConfirm={() => {
						validData();
					}}
				>
					<div class="flex pl-4 pr-8">
						{/* <div class="w-52 pr-4">
							<LazyUploadFile
								title={!props.detail.sn ? "请输入网关SN" : "点击选择网关程序"}
								ref={uploadEl}
								disabled={!props.detail.sn}
								v-model:fileUrl={props.detail.progrom}
								v-model:fileName={props.detail.progrom}
								disabled={props.readonly}
								width="100%"
								height="200px"
								emptyTips="请上传网关程序"
							></LazyUploadFile>
						</div> */}
						<div class="flex-1">
							<el-form model={props.detail} ref={formRef} rules={formRule} label-width="100px" disabled={props.readonly}>
								<el-form-item label={proxy?.$t("gateway_basicdiglog.form_label.sn")} prop="sn">
									<el-input v-model={props.detail.sn} disabled={props.detail.id ? true : false}>
										{{
											append: () => {
												return props.detail.id ? null : (
													<el-button type="primary" link onClick={() => (props.detail.sn = generateSn())}>
														<span class="text-sm p-1 pr-1">{proxy?.$t("gateway_basicdiglog.btn.auto")}</span>
													</el-button>
												);
											}
										}}
									</el-input>
								</el-form-item>
								<el-form-item label={proxy?.$t("gateway_basicdiglog.form_label.name")} prop="name">
									<el-input v-model={props.detail.name} />
								</el-form-item>
								<el-form-item label={proxy?.$t("gateway_basicdiglog.form_label.deptId")} prop="deptId">
									<SelectDeptList detail={props.detail} initDefault={!props.detail.deptId} />
								</el-form-item>
								<el-form-item label={proxy?.$t("gateway_basicdiglog.form_label.product")} prop="productModel">
									<SelectProductList detail={props.detail} v-model={props.detail.productModel} />
								</el-form-item>
							</el-form>
						</div>
					</div>
				</DialogBox>
			);
		};
	}
});
